<template>
  <div class="page">
    <el-card class="!border-none mr-4 w-60" shadow="never">
      <el-badge :value="msgCount" style="width: 100%;height: 45px;">
        <el-button text bg style="width: 100%;height: 45px;">审核通知</el-button>
      </el-badge>
    </el-card>
    <el-card class="!border-none flex-1" shadow="never">
      <div>
        <el-input
          v-model="searchValue"
          style="max-width: 600px"
          placeholder="请输入关键词搜索消息"
          class="w-80"
          clearable
          @clear="clearValue"
          @keyup.enter.native="searchEnter"
          maxlength="30"
        > 
          <template #append>
            <el-button :icon="Search" @click="onSearch" />
          </template>
        </el-input>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane label="全部" :name="0"></el-tab-pane>
        <el-tab-pane label="未读" :name="1"></el-tab-pane>
      </el-tabs>
      <ul v-infinite-scroll="load" class="infinite-list flex-item" style="overflow: auto">
        <li v-for="(item,index) in list" :key="index" class="infinite-list-item" :class="{'item-active': item.is_read}" @click="goDetail(item)">
          <span>{{ item.content }}</span>
          <span>{{ item.create_time }}</span>
        </li>
      </ul>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import useAppStore from '@/stores/modules/app'
import { getInStationList, readMsg } from '@/api/demand/lists';
import router, {getRoutePath} from '@/router';
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
const appStore = useAppStore()
const msgCount = computed(() => appStore.msgCount)
appStore.getCount();
const activeName = ref(0)
const handleClick = (val: any) => {
    console.log(val)
    page_no.value = 1;
    list.value = [];
    getList();
    // queryParams.status = val == 0 ? 0: 1; 
    // getLists()
}
const searchValue = ref('');
const onSearch = () => {
    console.log(searchValue.value)
    startSearch();
}
const searchEnter = () => {
    console.log(searchValue.value)
    startSearch();
}
const startSearch = () => {
  page_no.value = 1;
  list.value = [];
  getList();
}
const clearValue = () => {
    console.log('清空重新调用搜索')
    startSearch()
}

const count = ref(0);
const load = () => {
  console.log('load')
  if ( count.value > list.value.length ) {
    page_no.value++;
    getList();
  }
}

const page_no = ref(1)
const list:any = ref([])

const getList = async () => {
  const res = await getInStationList({
    type:activeName.value,
    keys: searchValue.value,
    page_no: page_no.value,
    page_size: 15
  })
  console.log(res)
  // list.value.concat(res.list)
  list.value = list.value.concat(res.list)
  count.value = res.count;
  console.log(list.value)
}
getList()

const goDetail = async (data:any) => {
  console.log(data)
  if ( data.is_read ) {
    // 已读
    if (data.is_new_demand == 1) {
      router.push({path: getRoutePath('demand.demand/editDemand'), query: { id: data.p_id, area_id: data.area_id }})
    } else {
      router.push({ path: getRoutePath('demand.demand/detail'), query: { id: data.p_id, area_id: data.area_id } })
    }
  } else {
    // 未读
    await readMsg({
      id: data.id
    })
    if (data.is_new_demand == 1) {
      router.push({path: getRoutePath('demand.demand/editDemand'), query: { id: data.p_id, area_id: data.area_id }})
    } else {
      router.push({ path: getRoutePath('demand.demand/detail'), query: { id: data.p_id, area_id: data.area_id } })
    }
  }
}

</script>
<style lang="scss" scoped>
.page{
    display: flex;

}
// .flex-item{
//     flex: 1;
// }
.infinite-list {
  height: 700px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
//   background: var(--el-color-primary-light-9);
  margin: 0 10px;
  border-bottom: 1px solid #ccc;
  padding: 0 5px;
  cursor: pointer;
//   color: var(--el-color-primary);
}
.item-active{
    color: #ccc;
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
/* 自定义滚动条整体样式 */
::-webkit-scrollbar {
  width: 6px; /* 滚动条的宽度 */
  height: 6px; /* 滚动条的高度（对于水平滚动条） */
}

/* 自定义滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888; /* 滑块背景色 */
  border-radius: 6px; /* 滑块圆角 */
}

/* 自定义轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 轨道背景色 */
  border-radius: 6px; /* 轨道圆角 */
}
</style>